<template>
  <!-- 流程任务统计 -->
  <div class="count-request-box">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <div class="item">
          <div class="num">{{ details.countMyRequestTask || 0 }}</div>
          <div class="txt">我待处理的任务</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <div class="item">
          <div class="num">{{ details.countMyProcessedTask || 0 }}</div>
          <div class="txt">我已处理的任务</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <div class="item">
          <div class="num">{{ details.countMyRquest || 0 }}</div>
          <div class="txt">指派给我的任务</div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
        <div class="item">
          <div class="num">{{ details.countactingToMyRequest || 0 }}</div>
          <div class="txt">委托给我待处理的任务</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="CountRequestBox">
import { ref, onMounted } from "vue";
import { countRequestFlowTask } from "@/api/modules/index";
import { useUserStore } from "@/stores/modules/user";
import { useRouter } from "vue-router";
const router = useRouter();

const userStore = useUserStore();

const details = ref<any>({});

onMounted(() => {
  countRequestFlowTask({
    "requestQueryDTO.loginName": userStore.username
  }).then(res => {
    details.value = res;
  });
});
</script>

<style scoped lang="scss">
.count-request-box {
  box-sizing: border-box;
  width: 100%;
  padding: 0 10px 10px;
  text-align: center;
  .item {
    box-sizing: border-box;
    padding: 15px 0 18px;
    margin-top: 10px;
    cursor: pointer;
    background-color: var(--el-menu-active-bg-color);
    background-size: 100% 100%;
    border-radius: 10px;
    transition: all 0.3s;
  }
  .num {
    font-size: 20px;
    font-weight: bold;
    color: $primary-color;
  }
  .txt {
    margin-top: 5px;
    font-size: 14px;
  }
}
</style>
